import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';

interface Props {
    message: string,
    title: string
}

const defaultProps: Partial<Props> = {
    message: '这个是消息呢'
}


const Message: React.FC<Props> = (props) => {
    const {message} = {...defaultProps, ...props}
    return (
        <div className='rt-message'>{message}</div>
    );
}

interface Item {
    messageContainer: HTMLElement
    root: ReactDOM.Root
}


const queque: Item[] = []
window.onShow = (props = null) => {
    const messageContainer = document.createElement('div');
    messageContainer.className = 'rt-message-container';
    messageContainer.style.top = `${(queque.length + 1) * 50}px`;
    document.body.appendChild(messageContainer);
    const root = ReactDOM.createRoot(messageContainer);
    root.render(<Message/>);

    queque.push({
        messageContainer,
        root
    })

    setTimeout(() => {
        const item = queque.find(item => item.messageContainer === messageContainer)!
        item.root.unmount();
        document.body.removeChild(item.messageContainer);
        queque.splice(queque.indexOf(item), 1);
    }, 2000);
}